/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React from 'react'
import {
  StyleSheet, Text, View, AppRegistry, TabBarIOS, Navigator, AsyncStorage
} from 'react-native'

//第三方组件
import Icon from 'react-native-vector-icons/Ionicons'

//自定义组件
import Account from './app/account/index'
import Edit from './app/edit/index'
import List from './app/creation/index'
import Login from './app/account/login'

var doySay = React.createClass({
  getInitialState(){
    return {
      selectedTab: 'list',
      logined: false, //是否已经登录
      user: null,
    }
  },

  componentDidMount(){
    this._asyncAppStatus();
  },

  //从本地缓存中撮登录信息
  _asyncAppStatus(){
    AsyncStorage.getItem('user')
      .then((data) => {
        let user, newStatus = {};
        if (data) {
          user = JSON.parse(data);
        }
        if (user && user.accessToken) {
          newStatus.user = user;
          newStatus.logined = true;
        }
        else {
          newStatus.logined = false;
        }
        this.setState(newStatus);
      })
  },

  _afterLogin(user){
    user = JSON.stringify(user);
    AsyncStorage.setItem('user', user)
      .then(() => {
        this.setState({
          logined: true,
          user: user
        });
      })
  },

  render() {
    if (!this.state.logined) {
      return <Login afterLogin={this._afterLogin}/>
    }

    return (
      <TabBarIOS tintColor="#ee735c">
        <Icon.TabBarItem
          iconName='ios-videocam-outline'
          selectedIconName='ios-videocam'
          selected={this.state.selectedTab === 'list'}
          onPress={() => {
            this.setState({
              selectedTab: 'list'
            });
          }}>
          <Navigator
            initialRoute={{ name: 'list', component: List }}
            configureScene={(route) => {
              return Navigator.SceneConfigs.FloatFromRight;  //导航转入新页面的打开方式 FloatFromRight
              //该方式在真机上很卡顿，后期优化
            }}
            renderScene={(route, navigator) => {
              let Component = route.component;
              return <Component {...route.params} navigator={navigator} />
            }}/>
        </Icon.TabBarItem>
        <Icon.TabBarItem
          iconName='ios-recording-outline'
          selectedIconName='ios-recording'
          selected={this.state.selectedTab === 'edit'}
          onPress={() => {
            this.setState({
              selectedTab: 'edit'
            });
          }}>
          <Edit/>
        </Icon.TabBarItem>
        <Icon.TabBarItem
          iconName='ios-more-outline'
          selectedIconName='ios-more'
          selected={this.state.selectedTab === 'account'}
          onPress={() => {
            this.setState({
              selectedTab: 'account'
            });
          }}>
          <Account user={this.state.user}/>
        </Icon.TabBarItem>
      </TabBarIOS>
    )
      ;
  }
});

var styles = StyleSheet.create({
  tabContent: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  },
  tabText: {
    color: 'white',
    margin: 50,
  },
});

AppRegistry.registerComponent('doySay', () => doySay);
